<template>
  <!-- 一、利用 MUI 搭建基本结构 -->
  <div class="goods-info">
    <!-- 小球结构 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <!-- 轮播图的组件 -->
          <!-- 4.3 组件的使用 -->
          <swiper :lunbotu="lunbotu" imgName="src" id="goods-info-swiper"></swiper>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsInfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价:<del class="market_price">¥{{ goodsInfo.market_price }}</del>
            销售价:<span class="sell_price">¥{{ goodsInfo.sell_price }}</span>
          </p>
          <!-- 这里的max是库存量 -->
          <!-- 
            由于,goodsinfo 是通过ajax动态获取回来的,但是ajax是异步请求,需要消耗时间
            因此,可能会导致这样的情况,numbox 组件先于ajax渲染出来,此时组件渲染的时候,goodsinfor 为空对象
            因此,传递到子组件中的stock_quantity 是 undefined
           -->
          <p>
            购买数量:
            <num-box :max="goodsInfo.stock_quantity" @changeCount="changeCount"></num-box>
          </p>

          <!-- 使用编程式导航,来实现路由页面的跳转 -->
          <!-- 编程式导航: 就是使用JS代码的方式,来实现路由的跳转 -->
          <!-- 元素导航: 使用 router-link 元素实现的导航 -->
          <mt-button type="primary" size="small" class="btnbuy">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="addCartItem">
            加入购物车
          </mt-button>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号: {{ goodsInfo.goods_no }}</p>
          <p>库存情况: {{ goodsInfo.stock_quantity }}</p>
          <p>上架事件: {{ goodsInfo.add_time | dateFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="toDesc">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="toCom">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
// 四、导入轮播图组件并组册
import Swiper from "../sub-components/Swiper.vue"
// 六、导入数字输入框组件并注册
import NumBox from "../sub-components/NumBox.vue"
// 10.1 按需导入
import { mapMutations } from "vuex"

export default {
  // 注册组件
  components: { Swiper, NumBox },
  // 二、props接收参数
  props: ["id"],
  data() {
    return {
      lunbotu: [],
      goodsInfo: {},
      // 让小球显示和隐藏的标识符
      flag: false,
      // 子组件传递的商品数量
      count: 1
    }
  },

  methods: {
    // 三、获取轮播图信息的
    async getlunbotu() {
      // 3.1 发送请求
      const { data } = await this.$http.get(`/api/getthumimages/${this.id}`)
      if (data.status === 0) {
        // console.log(data)
        // 3.2 因为图片路径用不了,所以我手动改掉了路径
        data.message.forEach(item => {
          item.src =
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxHHNXyFtZzv7arTK5nnoQhfg_M9tzIZg4jw&usqp=CAU"
        })
        // 3.3 保存数据
        this.lunbotu = data.message
        // 3.4 接下来考虑到又要渲染轮播图,所以到 Home.vue 中抽出轮播图的代码进行封装复用
      }
    },

    // 五、获取商品参数区的价格,标题等数据,保存数据,渲染页面
    async getGoodsInfo() {
      const { data } = await this.$http.get(`/api/goods/getinfo/${this.id}`)
      if (data.status === 0) {
        this.goodsInfo = data.message[0]
      }
    },

    // 六、点击图文介绍实现路由的跳转
    toDesc() {
      // console.log(this)
      // 点击按钮,跳转到商品的描述页面
      // 注意: 在 this 这个组件身上,有 this.$route 和 this.$router
      // this.$route 是专门用来获取路由中参数的
      // this.$router 是专门来实现编程式导航的
      this.$router.push(`/home/goodsdesc/${this.id}`)
    },

    // 七、点击图文介绍实现路由的跳转
    toCom() {
      // 方法一
      // this.$router.push(`/home/goodscomment/${this.id}`)

      // 方法二 在 router.js 中对应的规则上加上 name:'gcom', 属性
      this.$router.push({
        name: "gcmt",
        params: { id: this.id }
      })
    },

    // 八、实现加入购物车小球动画
    addCartItem() {
      // 8.1 点击加入购物车控制显示隐藏小球的布尔值
      this.flag = !this.flag
      // 下面是第十步之后的操作
      // 10.1 调用addCart添加购物车 格式为 {id,count,isChecked,price}
      this.addCart({
        id: +this.id,
        count: this.count,
        isChecked: true,
        price: this.goodsInfo.sell_price
      })
    },
    // 8.2 入场动画开始之前,设置小球的起始状态,
    beforeEnter(el) {
      el.style.transform = "translate(0,0)"
    },
    // 8.3 入场动画结束之后,小球的终止状态
    enter(el, done) {
      // transform: 变换 scale() 2d 3d
      // translate: 位移
      // transition: 过渡
      // 获取小球的横纵坐标
      const ballPos = el.getBoundingClientRect()
      // console.log(ballPos)
      // 获取购物车的徽标的横纵坐标
      const badgePos = document.querySelector(".mui-badge").getBoundingClientRect()
      // console.log(badgePos)

      el.offsetWidth
      // 设置小球的入场动画终止状态 购物车的徽标的横纵坐标 - 小球的横纵坐标
      el.style.transform = `
      translate(${badgePos.left - ballPos.left}px,${badgePos.top - ballPos.top}px)`
      // 设置小球的入场动画终止状态
      el.style.transition = "all .8s cubic-bezier(.6,-0.36,.68,.45)"
      // 当入场动画完成之后,需要手动调用一下 done 回调函数,直接跳过小球的出场动画
      done()
    },
    // 8.4 入场动画完成之后的回调函数
    afterEnter() {
      this.flag = false
    },

    // 九、接收numbox组件的数量值,同步到父组件中
    changeCount(count) {
      // 9.1 同步数量
      this.count = count
    },

    // 十、按需导入mapMutations,并使用
    ...mapMutations(["addCart"])
  },

  created() {
    // 调用获取轮播图信息的方法
    this.getlunbotu()
    // 调用获取商品参数区的价格,标题等数据的方法
    this.getGoodsInfo()
  }
}
</script>

<style lang="scss" scoped>
.goods-info {
  background-color: #ccc;
  overflow: hidden;
  .market_price {
    font-size: 12px;
    margin-right: 5px;
  }
  .sell_price {
    color: red;
    font-size: 14px;
  }
  .btnbuy {
    margin-right: 10px;
  }
  .mui-card-footer {
    flex-direction: column;
    button + button {
      margin-top: 10px;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 999;
    top: 370px;
    left: 140px;
  }
}
</style>
